<template>
  <div id="app">
        <div class="content">
    <div class="bbody">
        <div class="head">
            <span class="colorg"><router-link class="rlink" to="/">首页</router-link></span>
            <span class="colorg" style="margin-left: 10px;">></span>
            <span style="margin-left: 10px;">往期命中详情</span>
        </div>
        <div class="tblist">
            <div class="box1">
                <div class="box2">
                    <div class="time colorg2">{{ xiangqin.matchTime }}</div>
                    <div class="timeb pd10">
                        <div class="zqd pd10">
                          <img class="qdimg" :src="xiangqin.zranksPhoto" alt="">
                            <img v-if="xiangqin.advantageScore==1" class="ying" src="../assets/img/ying.png" alt="">
                          </div>
                        <div class="zqd2">
                            <div class="fcenter pd30">{{ xiangqin.zName }}</div>
                            <div class="fcenter pd5 coloro">{{ xiangqin.zscore }}</div>
                        </div>
                        <div class="vs">
                            <div class="fcenter colorg3">{{ xiangqin.matchRound }}轮</div>
                            <div class="fcenter pd10">VS</div>
                            <div class="fcenter pd5">:</div>
                        </div>
                        <div class="yqd2">
                            <div class="fcenter pd30">{{ xiangqin.kName }}</div>
                            <div class="fcenter pd5 coloro">{{ xiangqin.kscore }}</div>
                        </div>
                        <div class="yqd pd10">
                          <img class="qdimg" :src="xiangqin.kranksPhoto" alt="">
                          <img v-if="xiangqin.advantageScore==2" class="ying" src="../assets/img/ying.png" alt="">
                          </div>
                    </div>
                </div>
            </div>
            <!-- <div class="jslist" v-for="(item, index) in sjlist" :key="index">
                <div class="jsfx coloro">{{ item.title }}</div>
                <div class="fxx">{{ item.details }}</div>
            </div> -->
            <!-- <div class="jslist">
                <div class="jsfx coloro">技术分析</div>
                <div class="fxx">{{ xiangqin.analysis }}</div>
            </div> -->
            <div class="jslist">
                <div class="jsfx coloro">总结</div>
                <div class="fxx">{{ xiangqin.advantageEvaluate }}</div>
            </div>
            <div style="height:500px"></div>
        </div>
    </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      xiangqin:'',
      lianxi:''
    }
  },
  created() {
    this.lianxi = JSON.parse(window.localStorage.getItem('lianxi'))
    console.log(this.$route.params.yhid)
    console.log(this.$route.params.fxid)
    console.log(this.$route.params.detailsxq)
    this.xiangqin = this.$route.params.detailsxq
  },
  mounted() {
    this.lianxi = JSON.parse(window.localStorage.getItem('lianxi'))
    console.log(this.$route.params.yhid)
    console.log(this.$route.params.fxid)
    console.log(this.$route.params.detailsxq)
    this.xiangqin = this.$route.params.detailsxq
  },
  methods: {
  
  }
}
</script>

<style lang="less" scoped>
@import "../assets/css/font.css";
@import "../assets/css/index.css";
*{
			padding: 0;
			margin: 0;
		}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

  .content {
    width: 90%;
  .bbody {
      height: 100%;
      width: 100%;
      background-color: #fff;
      .head {
        height: 50px;
        padding-left: 25px;
        line-height: 50px;
        border: 1px solid #EEEEEE;
      }
      .tblist {
          margin-top: 45px;
          .box1 {
              width: 100%;
              height: 140px;
            //   background-color: pink;
              .box2 {
                width: 70%;
                height: 140px;
                // background-color: red;
                margin: 0 auto;
                .time {
                    text-align: center;
                }
                .timeb {
                    position: relative;
                    width: 60%;
                    height: 100px;
                    // background-color: #fff;
                    margin: 0 auto;
                    .zqd {
                        position: absolute;
                        width: 60px;
                        height: 60px;
                    }
                    .zqd2 {
                        position: absolute;
                        width: 100px;
                        height: 80px;
                        left: 70px;
                    }
                    .vs {
                        position: absolute;
                        width: 100px;
                        height: 80px;
                        left: 50%;
                        transform: translateX(-40px);
                        
                    }
                    .yqd {
                        position: absolute;
                        width: 60px;
                        height: 60px;
                        right: 0;
                    }
                    .yqd2 {
                        position: absolute;
                        width: 100px;
                        height: 80px;
                        right: 60px;
                    }
                }
              }
          }
          .jslist {
            width: 95%;
            margin: 20px auto;
            // background-color: pink;
            .jsfx {
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                background-color: #F6F6F6;
            }
            .fxx {
                // height: 300px;
                padding: 20px;
                border: 1px solid#F6F6F6;
            }
          }
      }
  }
  }

.qdimg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.fcenter {
    text-align: center;
}
.ying {
  position: absolute;
  width: 20px;
  height: 20px;
}

.div-inline{ display:inline-block} 

#nav {
  margin-top: 20px;
  text-align: center;
  width: 100%;
  height: 50px;
  background:rgba(0,0,0,0.1);
}

.database {
  width: 100px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 50px;
  padding-right: 20px;
  font-size: 20px;
  color: #FFFFFE;
}

.list {
  width: 70px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 45px;
  color: #FFFFFE;
}


.fleft {
  float: left;
}

.bottom {
  position: relative;
  bottom: 0;
  color: #FFFFFF;
  height: 100px;
  width: 100%;
  background-color: #191C21;
}
.gg {
  position: absolute;
  margin-left: 25%;
  margin-top: 20px;
}
.right0 {
  margin-left: 70px;
}
.bbt {
  margin-top: 10px;
}

</style>
